<template>
  <div>
      <img src="https://res5.vmallres.com/shopdc//pic/20211210/6c51c7d3-dc45-4c12-9c58-ddc4a3096497.png" alt="" class="img1">
      <img src="https://res8.vmallres.com/shopdc//pic/2021915/3e24d2c5-24e7-420f-9205-e95dc9a9dfea.png" alt="" class="img2">
      <div class="line">
          <div class="box" v-for="(v,i) in arr" :key="i">
              <img :src="v.img" alt="">
                <p class="p1">{{v.goodName}}</p>
                <p class="p2">{{v.goodMessage}}</p>
                <div class="price">
                    <p>￥<span>{{v.goodPrice}}</span></p>
                </div>
                <div class="active">
                    <span >限时立省1200元</span>
                </div>           
          </div>
    </div>
  </div>
</template>

<script>
import link from "@/apis/link.js"
export default {
        data(){
        return {
            arr:[]
        }
    },
    mounted(){
        link("/Content3").then((ok)=>{
            console.log(ok.data);
            this.arr = ok.data
        })
    }
}
</script>

<style lang="scss" scoped>
    div{
        .img1{
            width: 4.14rem;
            height: 1.12rem;
        }
        .img2{
            width: 4.14rem;
            height: 0.79rem;
        }
        .line{
            width: 4.09rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .box{
            width: 1.99rem;
            height: 3.01rem;
            position: relative;
            img{
                width: 1.99rem;
                height: 1.98rem;
                display: block;
                margin: auto;
            }
            .p1{
                font-size: 0.06rem;
                text-align: center;
                
                 line-height: 0.18rem;
            }
            .p2{
                font-size: 0.045rem;
                 text-align: center;
                 color: #666666;
                 line-height: 0.18rem;
            }
            .price{
                width: 0.81rem;
                height: 0.23rem;
                margin: auto;
                background-color: #222222;
                border-radius: 0.4rem;
                margin-top: 0.05rem;
                p{
                    color: white;
                    text-align: center;
                    font-weight: 600;
                }
            }
            .active{
                width: 1.2rem;
                height: 0.2rem;
                background-color: #e16773;
                border-radius: .425rem .425rem .425rem 0;
                position: absolute;
                top: 1.7rem;
                left: 0.05rem;
                span{
                    font-size: 0.05rem;
                    color: white;
                    display: inline-block;
                    margin-left: 0.09rem;
                    line-height: 0.2rem;
                }
            }
        }
    }
</style>